/* 
1 点击标题  url 先发生改变 
  1 路由跳转  
    首页 ->  url:"/home/index" ->  pages/index/index
    找房 ->  url:"/home/found" ->  pages/found/index
    我的 ->  url:"/home/my"    ->  pages/my/index
    
  2 通过路由的对象 history.push 来实现跳转即可 
    在 Tabbar.Item 组件中 onPress中 添加了点击 跳转

  3 如何改造代码 让 点击不同的标题
    对应的内容 跟着切换 
 */




import React from 'react';
import { TabBar } from 'antd-mobile';

import { Route, Redirect } from "react-router-dom";

// 这个指向了  index页面而不是 项目的入口文件 index.js 
import Index from "../index/index";
import Found from "../found";
import My from "../my";


class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'blueTab',
      hidden: false,
      fullScreen: false,
    };
  }

  renderContent(pageText) {
    return <div>
      <hr />
      <div>{pageText}</div>
      <hr />
    </div>
  }

  render() {
    return (
      <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
        <Route exact path="/home" > <Redirect to="/home/index"></Redirect> </Route> 
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
        >
          <TabBar.Item
            title="首页"
            key="Index"
            icon={<i className="iconfont icon-ind" /> }
            selectedIcon={<i className="iconfont icon-ind" /> }
            selected={this.props.location.pathname === "/home/index"}
            onPress={() => {
              this.props.history.push("/home/index")
            }}
          >
            <Route path="/home/index" component={Index} ></Route>
          </TabBar.Item>
          <TabBar.Item
            icon={<i className="iconfont icon-findHouse" /> }
            selectedIcon={<i className="iconfont icon-findHouse" /> }
            title="找房"
            key="Found"
            selected={this.props.location.pathname === "/home/found"}
            onPress={() => {
              this.props.history.push("/home/found")
            }}
           
          >
            <Route path="/home/found" component={Found} ></Route>
          </TabBar.Item>
          <TabBar.Item
            icon={<i className="iconfont icon-my" /> }
            selectedIcon={<i className="iconfont icon-my" /> }
            title="我的"
            key="My"
            selected={this.props.location.pathname === "/home/my"}
            onPress={() => {
              this.props.history.push("/home/my")
            }}
          >
            <Route path="/home/my" component={My} ></Route>
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}

export default Home;